<template>
	<view>
		<view class="form_box">
			<view class="item_box">
				<u-input v-model="phone" type="number" :custom-style="{ 'font-size': '15px' }" placeholder="请输入手机号码" :clearable="false" />
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
					<u-button size="mini" @tap="getCode" hover-class="none">{{ tips }}</u-button>
				</view>
			</view>
			<view class="item_box"><u-input v-model="code" type="text" :custom-style="{ 'font-size': '15px' }" placeholder="请输入验证码" /></view>
			<view class="item_box"><u-input v-model="oldPwd" type="text" :custom-style="{ 'font-size': '15px' }" placeholder="请输入新密码" /></view>
			<view class="item_box"><u-input v-model="newPwd" type="text" :custom-style="{ 'font-size': '15px' }" placeholder="请输入确认密码" /></view>
		</view>
		<button type="default" class="btn" hover-class="none">确定</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '',
			code: '',
			oldPwd: '',
			newPwd: '',
			title: '',
			tips: '',
			seconds: 10
		};
	},
	methods: {
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			// this.$u.toast('倒计时结束');
		},
		start() {
			// this.$u.toast('倒计时开始');
		}
	}
};
</script>

<style lang="scss" scoped>
.form_box {
	padding: 30upx;
	box-shadow: 0px 4upx 10upx 0px rgba(4, 0, 0, 0.1);
	border-radius: 10upx;
	margin-bottom: 130upx;
	.item_box {
		display: flex;
		align-items: center;
		padding: 15upx 0;
		border-bottom: 2upx solid #eeeeee;
		&:last-child {
			padding-bottom: 0;
			border: none;
		}
	}
}

.btn {
	width: 100%;
	height: 60upx;
	border-radius: 8upx;
	font-size: 32upx;
	line-height: 60upx;
	color: #ffffff;
	background: #373846;
	border: none;
	&::after {
		border: none;
	}
}
</style>

<style>
page {
	padding: 30upx;
}
</style>
